<template>
  <crud
    :entity-name="entityName"
    :dialog-enity.sync="entity"
    :keyword-placeholder="L('RoleName')+'/'+L('DisplayName')+'/'+L('Description')"
    :dialog-optins="dialogOptins"
    @dialogFormClearValidate="handleFormClearValidate"
    @dialogFormValidate="handleFormValidate"
  >
    <template slot="TableColumns">
      <el-table-column
        prop="name"
        :label="L('RoleName')"
      >
        <template slot-scope="{row}">
          {{ row.name }}
          <el-tag v-if="row.isStatic">
            系统
          </el-tag>
          <el-tag
            v-if="row.isDefault"
            type="info"
          >
            默认
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="displayName"
        :label="L('DisplayName')"
      />
      <!-- <el-table-column
        prop="description"
        :label="L('Description')"
      /> -->
      <el-table-column
        sortable="custom"
        prop="creationTime"
        :label="L('CreationTime')"
      >
        <template slot-scope="{row}">
          <span>{{ row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </template>

    <createOrEditRole
      ref="CreateOrEditDialog"
      slot="CreateOrEditDialog"
      :entity="entity"
    />
  </crud>

</template>

<script>
import crud from '@/components/CRUD'
import createOrEditRole from './components/CreateOrEditRole'
export default {
  name: 'Roles',
  components: { crud, createOrEditRole },
  data() {
    return {
      entity: {},
      entityName: 'role',
      dialogOptins: {
        width: '500px',
        createEnityParam: { isDefault: false, permissions: [] },
        createTitle: this.L('CreateNewRole'),
        editTitle: this.L('EditRole'),
        deleteConfirm: this.L('DeleteRolesConfirm')
      }
    }
  },
  created() {
    this.$store.dispatch({
      type: 'role/getAllPermissions'
    })
  },
  methods: {
    handleFormClearValidate() {
      this.$refs.CreateOrEditDialog.clearValidate()
    },
    handleFormValidate(cb) {
      this.$refs.CreateOrEditDialog.validate(cb)
    }
  }

}
</script>
